import React, { Component } from 'react'
import Chart from 'react-apexcharts'
import { Grid, Label } from 'semantic-ui-react'
import ChartBox from 'components/chart'
import { Query } from 'react-apollo'
import Loading from 'components/loading'
import getUserMonth from 'graphql/project/task/user/userMonthYear.graphql'
import moment from 'moment'

const getDayData = () => {
  const result = []
  for (let i = 0; i < 31; i += 1) {
    result.push({
      x: `${i+1}日`,
      y: 0,
    })
  }
  return result
}

const getMonthData = () => {
  const result = []
  for (let i = 0; i < 12; i += 1) {
    result.push({
      name: `${i+1}月`,
      data: getDayData(),
    })
  }
  return result
}

const getInitValue = () => {
  const result = []
  for (let i = 0; i < 32; i += 1) {
    result.push(0)
  }
  return result
}

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      optionsLabel: {
        dataLabels: {
          enabled: false,
        },
        plotOptions: {
          heatmap: {
            shadeIntensity: 0.5,
            colorScale: {
              ranges: [
                {
                  from: 0,
                  to: 20,
                  name: '磨洋工',
                  color: '#00A100',
                },
                {
                  from: 21,
                  to: 100,
                  name: '正常工作',
                  color: '#128FD9',
                },
                {
                  from: 101,
                  to: 500,
                  name: '太快了',
                  color: '#FFB200',
                },
                {
                  from: 501,
                  to: 1000,
                  name: '疑似作弊',
                  color: '#FF0000',
                },
              ],
            },
          },
        },
        title: {
          text: '标注量年报:',
        },
      },
    }
  }

  render() {
    const {
      username, pid, month, year,
    } = this.props
    const variablesFinal = {
      user: username,
      time: `${year}%`,
      pid,
    }
    return (
      <Query
        query={getUserMonth}
        variables={variablesFinal}
        fetchPolicy="network-only"
        notifyOnNetworkStatusChange
      >
        {({ loading, error, data }) => {
          if (loading) return <Loading />
          if (error) return `Error! ${error.message}`
          const labelValues = getMonthData()
          let labelCount = 0
          let taskCount = 0
          if (data && data.user_label_create_view) {
            data.user_label_create_view.map((ann, i) => {
              const dayIndex = parseInt(ann.day.substring(8), 10) - 1
              const monthIndex = parseInt(ann.day.substring(5, 7), 10) - 1
              console.log(ann.day.substring(5, 6), dayIndex, monthIndex)
              labelValues[monthIndex].data[dayIndex].y = ann.labels
              labelCount += ann.labels
            })
          }
          if (data && data.user_task_finish_view) {
            data.user_task_finish_view.map((ann) => {
              taskCount += ann.tasks
            })
          }
          return (
            <Grid.Row>
              <Grid.Column width={16}>
                <Grid>
                  <Grid.Row centered columns={1}>
                    <Grid.Column>
                      <Chart
                        options={this.state.optionsLabel}
                        series={labelValues}
                        type="heatmap"
                        height={400}
                      />
                    </Grid.Column>
                  </Grid.Row>
                  <Grid.Row centered columns={5}>
                    <Grid.Column textAlign="center">
                      <Label circular style={{ backgroundColor: '#008FFB' }} empty key="red" />
                      {`标注数: ${labelCount}`}
                    </Grid.Column>
                    <Grid.Column textAlign="center">
                      <Label
                        circular
                        style={{ backgroundColor: 'rgb(0, 227, 150)' }}
                        empty
                        key="red"
                      />
                      {`任务数: ${taskCount}`}
                    </Grid.Column>
                  </Grid.Row>
                </Grid>
              </Grid.Column>
            </Grid.Row>
          )
        }}
      </Query>
    )
  }
}
